<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>float</title>
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
            background-color: #EEE
        }
        
        .box {
            width: 70%;
            height: 160px;
            background: #FFF;
            margin: 40px auto;
        }
        
        .box h3 {
            text-align: center;
            position: relative;
            top: 60px;
        }
        
        .effect1 {
            box-shadow: 0 10px 6px -6px #777
        }
        
        .effect2 {
            position: relative;
        }
        
        .effect2::before,
        .effect2::after {
            z-index: -1;
            position: absolute;
            content: "";
            bottom: 15px;
            left: 10px;
            top: 80%;
            width: 50%;
            max-width: 300px;
            background: #777;
            transform: rotate(-3deg);
            box-shadow: 0 15px 10px #777;
        }
        
        .effect2::after {
            transform: rotate(3deg);
            right: 10px;
            left: auto
        }
    </style>
</head>

<body>
    <div class="box effect1">
        <h3>阴影效果一</h3>
    </div>

    <div class="box effect3">
        <h3>阴影效果三</h3>
    </div>

    <div class="box effect2">
        <h3>阴影效果二</h3>
    </div>


</body>

</html>